<template>
    <div class="container container-register">
        <a-drawer width="1000" title="权限管理" placement="right" :closable="true" :visible="visible" @close="onClose"
            class="register-drawer">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '120px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 130px)' } }" ref="form" :model="formData" :rules="rules">
                    <div class="form-panel">
                        <div class="panel-title">选择角色权限</div>
                        <a-form-model-item class="yuan-form-radio" label="">
                            <a-radio-group v-model="formData.roleName">
                                <a-radio value="需求方">需求方</a-radio>
                                <a-radio value="成果方">成果方</a-radio>
                                <a-radio value="中介方">中介方</a-radio>
                            </a-radio-group>
                        </a-form-model-item>

                    </div>
                    <div class="form-panel yuan-form-col3">
                        <div class="panel-title">选择角色身份</div>
                        <a-form-model-item class="yuan-form-radio" label="">
                            <a-radio-group v-model="formData.userType" @change="userTypeChange">
                                <a-radio value="个人">个人</a-radio>
                                <a-radio value="企业/单位">企业/单位</a-radio>
                                <a-radio value="专家">专家</a-radio>
                                <a-radio value="专家团队">专家团队</a-radio>
                            </a-radio-group>
                        </a-form-model-item>

                        <template v-if="formData.userType">
                            <a-form-model-item class="yuan-form-item" label="手机号" prop="phone">
                                <a-input class="yuan-form-input" v-model="formData.phone" placeholder="手机号将作为登录账号" autocomplete="new-user"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="验证码" prop="noteCode">
                                <a-input class="yuan-form-input" v-model="formData.noteCode" placeholder="请输入验证码" autocomplete="new-user"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="">
                                <a-button class="captcha-btn" type="primary" @click="getCaptcha">{{captchaWords}}</a-button>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item class="yuan-form-item" label="密码" prop="password">
                                <a-input class="yuan-form-input" v-model="formData.password" type="password"
                                    placeholder="请输入密码" autocomplete="new-password"></a-input>
                            </a-form-model-item>
                            
                            <a-form-model-item class="yuan-form-item" label="二次确认" prop="surePassword">
                                <a-input class="yuan-form-input" v-model="formData.surePassword" type="password"
                                    placeholder="请再次输入密码"></a-input>
                                 
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" style="width:100%" label="提示">
                                <span>密码限制8位以上且必须包含大小写字母、数字和特殊符号</span>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                        </template>

                        <!----------- 个人 --------->
                        <template v-if="formData.userType==='个人'">
                            <a-form-model-item class="yuan-form-item" label="姓名" prop="name">
                                <a-input class="yuan-form-input" v-model="formData.name" placeholder="请输入姓名"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="性别" prop="gender">
                                <a-radio-group class="yuan-form-input" v-model="formData.gender">
                                    <a-radio value="男">男</a-radio>
                                    <a-radio value="女">女</a-radio>
                                </a-radio-group>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item class="yuan-form-item" label="所在企业" prop="placeEnterprise">
                                <a-input class="yuan-form-input" v-model="formData.placeEnterprise" placeholder="请输入"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="身份证号" prop="identityCard">
                                <a-input class="yuan-form-input" v-model="formData.identityCard" placeholder="请输入"></a-input>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item label="上传头像" class="yuan-form-item" v-if="pageReady">
                                <UploadVue :uploadLength="1" @uploadChange="uploadChangeHead"
                                    :defImgList="formData.headPortrait?[formData.headPortrait]:[]" />
                                <div style="line-height:30px">jpg.png.gif格式.不超过2MB</div>
                            </a-form-model-item>

                            <div class="clear-both" style="margin-top:10px"></div>
                            <a-form-model-item class="yuan-form-row" label="简介" prop="briefIntroduction">
                                <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                    v-model="formData.briefIntroduction" placeholder="请输入个人简介" :maxLength="500" />
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="所在地区" prop="placeAreaCode">
                                <a-cascader class="yuan-form-input" v-model="formData.placeAreaCode" :options="addrData"
                                    placeholder="请选择" @change="onAddrChange" />
                            </a-form-model-item>
                        </template>

                        <!----------- 企业 -------------->
                        <template v-else-if="formData.userType==='企业/单位'">
                            <a-form-model-item class="yuan-form-item" label="企业/单位名称" prop="name">
                                <a-input class="yuan-form-input" v-model="formData.name" placeholder="请输入企业/单位名称"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="成立日期" prop="dateOfEstablishment">
                                <a-date-picker class="yuan-form-input" placeholder="成立日期" v-model="formData.dateOfEstablishment"
                                    inputReadOnly valueFormat="YYYY-MM-DD" />
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item class="yuan-form-item" label="信用代码" prop="creditCode">
                                <a-input class="yuan-form-input" v-model="formData.creditCode" placeholder="请输入"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="法定代表人" prop="legalRepresentative">
                                <a-input class="yuan-form-input" v-model="formData.legalRepresentative"
                                    placeholder="请输入"></a-input>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item label="上传头像" class="yuan-form-item" v-if="pageReady">
                                <UploadVue :uploadLength="1" @uploadChange="uploadChangeHead"
                                    :defImgList="formData.headPortrait?[formData.headPortrait]:[]" />
                                <div style="line-height:30px">jpg.png.gif格式.不超过2MB</div>
                            </a-form-model-item>
                            <a-form-model-item label="营业执照" class="yuan-form-item" v-if="pageReady" prop="businessLicense">
                                <UploadVue :uploadLength="1" @uploadChange="uploadChangeBusinessLicense"
                                    :defImgList="formData.businessLicense?[formData.businessLicense]:[]" />
                                <div style="line-height:30px">jpg.png.gif格式.不超过2MB</div>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="所在地区" prop="placeAreaCode">
                                <a-cascader class="yuan-form-input" v-model="formData.placeAreaCode" :options="addrData"
                                    placeholder="请选择" @change="onAddrChange" />
                            </a-form-model-item>
                        </template>
                        <!----------- 专家 --------->
                        <template v-if="formData.userType==='专家'">
                            <a-form-model-item class="yuan-form-item" label="姓名" prop="name">
                                <a-input class="yuan-form-input" v-model="formData.name" placeholder="请输入姓名"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="性别" prop="gender">
                                <a-radio-group class="yuan-form-input" v-model="formData.gender">
                                    <a-radio value="男">男</a-radio>
                                    <a-radio value="女">女</a-radio>

                                </a-radio-group>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="邮箱" prop="email">
                                <a-input class="yuan-form-input" v-model="formData.email" placeholder="请输入"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-radio" label="所属学院" prop="placeCollege">
                                <a-checkbox-group v-model="formData.placeCollege">
                                    <a-checkbox :value="item.content" v-for="item in placeCollegeList"
                                        :key="'c_'+item.content">{{item.content}}</a-checkbox>
                                </a-checkbox-group>
                            </a-form-model-item>

                            <a-form-model-item class="yuan-form-radio" style="width:90%" label="领域" prop="territory">
                                <a-checkbox-group v-model="formData.territory">
                                    <a-checkbox :value="item.content" v-for="item in territoryList"
                                        :key="item.id">{{item.content}}</a-checkbox>
                                </a-checkbox-group>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item label="上传头像" class="yuan-form-item" v-if="pageReady">
                                <UploadVue :uploadLength="1" @uploadChange="uploadChangeHead"
                                    :defImgList="formData.headPortrait?[formData.headPortrait]:[]" />
                                <div style="line-height:30px">jpg.png.gif格式.不超过2MB</div>
                            </a-form-model-item>

                            <div class="clear-both" style="margin-top:10px"></div>
                            <a-form-model-item class="yuan-form-row" label="简介" prop="briefIntroduction">
                                <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                    v-model="formData.briefIntroduction" placeholder="请输入个人简介" :maxLength="500" />
                            </a-form-model-item>
                            <a-form-model-item label="相关图片" class="yuan-form-row" v-if="pageReady">
                                <UploadVue :uploadLength="3" @uploadChange="uploadChangeCorrelationPicture"
                                    :defImgList="formData.correlationPicture?formData.correlationPicture:[]" />
                                <div style="line-height:30px">jpg.png.gif格式.不超过2MB</div>
                            </a-form-model-item>
                            <div class="clear-both" style="margin-top:10px"></div>
                            <a-form-model-item class="yuan-form-row" label="难点突破" prop="difficultyBreakThrough">
                                <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                    v-model="formData.difficultyBreakThrough" placeholder="请输入难点突破" :maxLength="500" />
                            </a-form-model-item>
                            <div class="clear-both" style="margin-top:10px"></div>
                            <a-form-model-item class="yuan-form-row" label="核心技术" prop="coreTechnology">
                                <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                    v-model="formData.coreTechnology" placeholder="请输入核心技术" :maxLength="500" />
                            </a-form-model-item>
                            <div class="clear-both" style="margin-top:10px"></div>
                            <a-form-model-item class="yuan-form-row" label="推广应用" prop="promotionUse">
                                <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                    v-model="formData.promotionUse" placeholder="请输入推广应用" :maxLength="500" />
                            </a-form-model-item>
                            <div class="clear-both" style="margin-top:10px"></div>
                            <a-form-model-item class="yuan-form-row" label="前期成果" prop="earlierStageAchievement">
                                <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                    v-model="formData.earlierStageAchievement" placeholder="请输入前期成果" :maxLength="500" />
                            </a-form-model-item>
                        </template>

                        <!----------- 专家团队 --------->
                        <template v-if="formData.userType==='专家团队'">
                            <a-form-model-item class="yuan-form-item" label="团队名称" prop="name">
                                <a-input class="yuan-form-input" v-model="formData.name" placeholder="请输入姓名"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="团队负责人" prop="teamPrincipal">
                                <a-input class="yuan-form-input" v-model="formData.teamPrincipal" placeholder="请输入"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="联系方式" prop="contactWay">
                                <a-input class="yuan-form-input" v-model="formData.contactWay" placeholder="请输入"></a-input>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item class="yuan-form-item" label="邮箱" prop="email">
                                <a-input class="yuan-form-input" v-model="formData.email" placeholder="请输入"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-radio" label="所属学院" prop="placeCollege">
                                <a-checkbox-group v-model="formData.placeCollege">
                                    <a-checkbox :value="item.content" v-for="item in placeCollegeList"
                                        :key="'c_'+item.content">{{item.content}}</a-checkbox>
                                </a-checkbox-group>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-radio" style="width:90%" label="领域" prop="territory">
                                <a-checkbox-group v-model="formData.territory">
                                    <a-checkbox :value="item.content" v-for="item in territoryList"
                                        :key="item.id">{{item.content}}</a-checkbox>
                                </a-checkbox-group>
                            </a-form-model-item>
                            <div class="clear-both" style="margin-top:10px"></div>
                            <a-form-model-item class="yuan-form-row" label="团队负责人简介" prop="briefIntroduction">
                                <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                    v-model="formData.briefIntroduction" placeholder="请输入团队负责人简介" :maxLength="500" />
                            </a-form-model-item>
                            <a-form-model-item label="相关图片" class="yuan-form-row" v-if="pageReady">
                                <UploadVue :uploadLength="3" @uploadChange="uploadChangeCorrelationPicture"
                                    :defImgList="formData.correlationPicture?formData.correlationPicture:[]" />
                                <div style="line-height:30px">jpg.png.gif格式.不超过2MB</div>
                            </a-form-model-item>

                            <div class="clear-both" style="margin-top:10px"></div>
                            <a-form-model-item class="yuan-form-row" label="难点突破" prop="difficultyBreakThrough">
                                <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                    v-model="formData.difficultyBreakThrough" placeholder="请输入难点突破" :maxLength="500" />
                            </a-form-model-item>
                            <div class="clear-both" style="margin-top:10px"></div>
                            <a-form-model-item class="yuan-form-row" label="核心技术" prop="coreTechnology">
                                <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                    v-model="formData.coreTechnology" placeholder="请输入核心技术" :maxLength="500" />
                            </a-form-model-item>
                            <div class="clear-both" style="margin-top:10px"></div>
                            <a-form-model-item class="yuan-form-row" label="推广应用" prop="promotionUse">
                                <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                    v-model="formData.promotionUse" placeholder="请输入推广应用" :maxLength="500" />
                            </a-form-model-item>
                            <div class="clear-both" style="margin-top:10px"></div>
                            <a-form-model-item class="yuan-form-row" label="前期成果" prop="earlierStageAchievement">
                                <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                    v-model="formData.earlierStageAchievement" placeholder="请输入前期成果" :maxLength="500" />
                            </a-form-model-item>

                        </template>

                    </div>

                    <div class="form-panel">
                        <div class="panel-title">技术经纪人</div>
                        <a-form-model-item class="yuan-form-radio" label="">
                            <a-checkbox-group @change="applyChange">
                                <a-checkbox :value="1">申请技术经纪人</a-checkbox>
                            </a-checkbox-group>
                        </a-form-model-item>
                        <template v-if="pageApply">
                            <BrokerVue ref="brokerVue" />
                        </template>

                    </div>

                </a-form-model>
                <div class="register-btn-box">
                    <a-button class="register-btn" type="default" @click="cancel">取消</a-button>
                    <a-button class="register-btn" type="primary" @click="save">提交注册信息</a-button>
                </div>
            </a-spin>
        </a-drawer>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import api from "@/api/api";
import UploadVue from "@/components/upload.vue";
import areaJson, { getAreaWords } from "@/utils/area";
import BrokerVue from "./components/broker.vue";
@Component({
    name: "dom",
    components: { UploadVue, BrokerVue },
})
export default class index extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Watch("visible")
    visibleChange(val) {
        if (val) {
            this.pageReady = true;
        } else {
            this.pageReady = false;
        }
    }
    formData: any = {
        headPortrait: "",
        placeAreaCode: [],
    };
    formLoading = false;
    defRules = {
        phone: [{ required: true, message: "请输入手机号", trigger: "change" }],
        noteCode: [{ required: true, message: "请输入验证码", trigger: "change" }],
        password: [{ required: true, message: "请输入密码", trigger: "change" }],
        surePassword: [{ required: true, message: "请输入密码", trigger: "change" }],
    };

    onClose() {
        (this.$refs.form as any).clearValidate();
        this.$emit("closeDrawer");
    }
    territoryList = [];
    async getSetting() {
        try {
            this.formLoading = true;
            const res = await api.getSetting("3");
            this.territoryList = res.data;
        } finally {
            this.formLoading = false;
        }
    }
    placeCollegeList = [];
    async getPlaceCollegeList() {
        try {
            this.formLoading = true;
            const res = await api.getSetting("1");
            this.placeCollegeList = res.data;
        } finally {
            this.formLoading = false;
        }
    }
    rules = {};
    userTypeChange() {
        (this.$refs.form as any).clearValidate();
        const rulesObj = {
            个人: {
                name: [{ required: true, message: "请输入姓名", trigger: "change" }],
                gender: [{ required: true, message: "请选择性别", trigger: "change" }],
                placeAreaCode: [{ required: true, message: "请选择所在城市", trigger: "change" }],
            },
            "企业/单位": {
                name: [{ required: true, message: "请输入企业/单位名", trigger: "change" }],
                dateOfEstablishment: [{ required: true, message: "请选择成立日期", trigger: "change" }],
                creditCode: [{ required: true, message: "请输入信用代码", trigger: "change" }],
                legalRepresentative: [{ required: true, message: "请输入法定代表人", trigger: "change" }],
                businessLicense: [{ required: true, message: "请上传营业执照", trigger: "change" }],
                placeAreaCode: [{ required: true, message: "请选择所在城市", trigger: "change" }],
            },
            专家: {
                name: [{ required: true, message: "请输入姓名", trigger: "change" }],
                gender: [{ required: true, message: "请选择性别", trigger: "change" }],
                placeCollege: [{ required: true, message: "请输入所属学院", trigger: "change" }],
                territory: [{ required: true, message: "请选择领域", trigger: "change" }],
                difficultyBreakThrough: [{ required: true, message: "请输入难点突破", trigger: "change" }],
                coreTechnology: [{ required: true, message: "请输入核心技术", trigger: "change" }],
                promotionUse: [{ required: true, message: "请输入推广应用", trigger: "change" }],
            },
            专家团队: {
                name: [{ required: true, message: "请输入团队名称", trigger: "change" }],
                placeCollege: [{ required: true, message: "请输入所属学院", trigger: "change" }],
                territory: [{ required: true, message: "请选择领域", trigger: "change" }],
                briefIntroduction: [{ required: true, message: "请输入团队负责人简介", trigger: "change" }],
                difficultyBreakThrough: [{ required: true, message: "请输入难点突破", trigger: "change" }],
                coreTechnology: [{ required: true, message: "请输入核心技术", trigger: "change" }],
                promotionUse: [{ required: true, message: "请输入推广应用", trigger: "change" }],
            },
        };
        this.rules = {
            ...this.defRules,
            ...rulesObj[this.formData.userType],
        };
    }
    mounted() {
        this.getSetting();
        this.getPlaceCollegeList();
        this.setAddrData();
        this.rules = {
            ...this.defRules,
        };
        this.pageReady = true;
    }
    cancel() {
        this.onClose();
    }
    save() {
        if (!this.formData.roleName) {
            this.$message.error("请选择角色权限");
            return;
        }
        if (!this.formData.userType) {
            this.$message.error("请选择角色身份");
            return;
        }
        if (this.formData.password !== this.formData.surePassword) {
            this.$message.error("两次输入的密码不一致");
            return;
        }

        let brokerInfo = {};
        if (this.pageApply) {
            brokerInfo = (this.$refs.brokerVue as any).getInfo();
            if (brokerInfo === false) return;
        }

        (this.$refs.form as any).validate(async (valid: boolean) => {
            if (!valid) return;
            this.formLoading = true;
            try {
                // 验证密码格式
                const minLength = 8;
                const hasNumber = /\d/;
                const hasSymbol = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/;
                const hasLowercase = /[a-z]/;
                const hasUppercase = /[A-Z]/;
                const password = this.formData.password;
                if (password.length < minLength) {
                    this.$message.warning("密码长度至少8位");
                    return false;
                }
                if (!hasNumber.test(password)) {
                    this.$message.warning("密码必须包含数字");
                    return false;
                }
                if (!hasSymbol.test(password)) {
                    this.$message.warning("密码必须包含特殊符号");
                    return false;
                }
                if (!hasLowercase.test(password)) {
                    this.$message.warning("密码必须包含小写字母");
                    return false;
                }
                if (!hasUppercase.test(password)) {
                    this.$message.warning("密码必须包含大写字母");
                    return false;
                }

                const data = {
                    ...this.formData,
                    ...brokerInfo,
                    hasTechnicalRepresentative: this.pageApply ? 0 : null, // 是经纪人传0  等待后台审核后变1
                };
                const res = await api.userRegister(data);
                this.$message.success("注册成功,请等待后台人员审核");
                this.onClose();
            } finally {
                this.formLoading = false;
            }
        });
    }
    pageReady = false;
    uploadChangeHead(e) {
        this.formData.headPortrait = e.length ? e[0].url : "";
    }
    uploadChangeBusinessLicense(e) {
        this.formData.businessLicense = e.length ? e[0].url : "";
    }
    uploadChangeCorrelationPicture(e) {
        this.formData.correlationPicture = e.map((item) => item.url);
    }
    onAddrChange(e: any) {
        this.formData.placeCity = getAreaWords(e);
    }

    addrData: any[] = [];
    setAddrData() {
        this.addrData = areaJson;
    }
    pageApply = false;
    @Watch("pageApply")
    pageApplyChage() {
        const applyRoles = {
            danwei: [{ required: true, message: "请输入账号", trigger: "change" }],
        };
        if (this.pageApply) {
            this.rules = {
                ...this.defRules,
                ...applyRoles,
            };
        } else {
            this.rules = {
                ...this.defRules,
            };
        }
    }
    applyChange(e) {
        if (e.length > 0) {
            this.pageApply = true;
        } else {
            this.pageApply = false;
        }
    }

    caseList = [{}];
    addCase() {
        this.caseList.push({});
    }
    delCase(index: number) {
        this.caseList.splice(index, 1);
    }
    captchaWords='获取验证码'
    async getCaptcha(){
        if(!this.formData.phone){
            this.$message.warning('请先输入手机号');
            return
        }
        if(this.captchaWords!=='获取验证码') return

        this.formLoading=true
        await api.getLoginCode({phone:this.formData.phone});

        let timeNum=60
        this.captchaWords=timeNum+'s后重试'
        const timeInterval=setInterval(()=>{
            timeNum--
            if(timeNum<=0){
                clearInterval(timeInterval)
                this.captchaWords='获取验证码'
            }else{
                this.captchaWords=timeNum+'s后重试'
            }
            
        },1000)
        this.formLoading=false
    }
}
</script>

<style lang="scss">
.register-drawer.ant-drawer-open {
    .ant-drawer-content-wrapper {
        right: 30px !important;
    }
}
.register-drawer {
    .ant-drawer-content {
        border-radius: 12px;
    }
    .ant-drawer-content-wrapper {
        height: 90% !important;
        top: 5%;
    }
    .form-panel {
        padding-bottom: 20px;
    }
    .panel-title {
        background-color: #edf2fe;
        padding: 5px 10px;
        font-weight: bold;
        font-size: 18px;
        color: #102040;
    }
    .yuan-form-radio {
        width: 100%;
        padding: 15px 0;
    }

    .register-btn-box {
        margin-top: 50px;
        display: flex;
        margin: 0 auto;
        width: 300px;
        justify-content: space-between;
    }
    .register-btn {
        width: 120px;
        height: 38px;
        font-size: 16px;
    }

    .ant-checkbox-wrapper {
        margin-left: 0 !important;
        margin-right: 8px;
    }

    .yuan-form-radio {
        margin-bottom: 20px;

        .ant-checkbox-wrapper,
        .ant-radio-wrapper {
            line-height: 38px;
        }
    }
}
</style>
